﻿<!DOCTYPE html>
<html>
<head> 
	<title>Particles with Processing.js</title> 
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 
	<script type="text/javascript" src="js/processing.js"></script> 
</head>
<body>
<canvas id="display"></canvas> 

<script  data-processing-target="display" type="application/processing"> 
float ToRadians = PI / 180.0;
float gAngle = 137.5077640844293;
float rotation = 0.0;
float initialRotation = 0.0;
int width, height;
int totalPetals = 300;
Petal[] petals = new Petal[totalPetals];
float radiusGrowth = 1.0049;
float radius = 60;
  
void setup() {
    width = jQuery(document).width() - 30;
    height = jQuery(document).height() - 30;
    size(width, height);
    noStroke();
    smooth();
    background(0);
    for (int i = 0; i < totalPetals; i++) {
        rotation += gAngle;
        radius *= radiusGrowth;
        Petal petal = new Petal();
        petal.x = width / 2 + cos(rotation * ToRadians) * radius;
        petal.y = height / 2 + sin(rotation * ToRadians) * radius;
        petal.rotation = rotation * ToRadians;
        petal.scale += (i * 2) / totalPetals;
        petal.render();
        petals[i] = petal;
    }
};
  
class Petal {
  float x = 0.0;
  float y = 0.0;
  float rotation = 0.0;
  float scaleVar = 1;
  color baseColor = color(0, 255, 255, 150);   
  color detailColor = color(255, 255, 255, 160);
  color trimColor = color(0, 0, 0);
  void render (){
      pushMatrix();
      translate(this.x, this.y);
      fill(this.baseColor);
      rotate(this.rotation);
      scale(this.scaleVar, this.scaleVar);
      rect(-10, -1, 20, 2);
      ellipse(0, 0, 10, 10);
      fill(this.detailColor);
      ellipse(0, 0, 8, 8);
      fill(this.trimColor);
      ellipse(0, 0, 5, 5);
      popMatrix();
  }
}

	</script> 
    </body>
</html>